<template>
  <div>
    <el-tooltip :content="$t('msg.navBar.guide')">
      <svg-icon id="guide-start" icon-class="guide" @click="onClick" />
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import { useI18n } from "vue-i18n";
import steps from "./steps.ts";
import SvgIcon from "@/components/SvgIcon/index.vue";

const i18n = useI18n();

let _d = null;
onMounted(() => {
  _d = new Driver({
    allowClose: false,
    closeBtnText: i18n.t("msg.guide.close"),
    nextBtnText: i18n.t("msg.guide.next"),
    prevBtnText: i18n.t("msg.guide.prev"),
  });
});
const onClick = () => {
  _d.defineSteps(steps);
  _d.start();
};
</script>

<style lang="scss" scoped>
:deep #driver-highlighted-element-stage {
  background: transparent !important;
  outline: 5000px solid rgba(0, 0, 0, 0.75);
}

:deep #driver-page-overlay {
  background: none !important;
}
</style>
